<template>
  <view class="question_wrap">
    <view class="group_wrap">
      <view class="group_name">{{list.group.title}}</view>
      <view class="subject_item" v-for="(item,index) in list.group.subjectList" :key="index">
        <view
          :class="list.answers[index] == 0 || list.answers[index] == null ? 'sub_wrap_red': 'sub_wrap'"
        >
          <view class="subject_type">[{{item.type}}]</view>
          <view class="subject_title">{{item.title}}</view>
          <view class="subject_grade">({{item.grade}}分)</view>
          <view v-if="list.answers[index] == 0 || list.answers[index] == null">
            <u-icon name="close" color="red" size="28" class="icon_item"></u-icon>
          </view>
        </view>
        <!-- <view class="options_item" v-for="(item2,index2) in item.option" :key="index2"> -->
        <view class="option_item" v-if="item.type=='单选'">
          <view class="uni-list">
            <radio-group>
              <label
                class="uni-list-cell uni-list-cell-pd"
                v-for="(item2, index2) in item.optionsList"
                :key="index2"
              >
                <view>
                  <radio
                    :value="item2.content"
                    style="padding:8rpx 0;"
                    :checked="item2.status == 1 "
                    disabled
                  />
                  <text style="padding-left:10rpx">{{item2.code}}. {{item2.content}}</text>
                </view>
              </label>
            </radio-group>
          </view>
        </view>

        <view class="option_item" v-if="item.type=='判断'">
          <view class="uni-list">
            <radio-group @change="radioChange">
              <label
                class="uni-list-cell uni-list-cell-pd"
                v-for="(item2, index2) in item.optionsList"
                :key="index2"
              >
                <view>
                  <radio
                    :value="item2.content"
                    style="padding:8rpx 0;"
                    :checked="item2.status == 1 "
                    disabled
                  />
                  <text style="padding-left:10rpx">{{item2.content}}</text>
                </view>
              </label>
            </radio-group>
          </view>
        </view>

        <view class="option_item" v-if="item.type=='多选'">
          <view class="uni-list">
            <checkbox-group>
              <label
                class="uni-list-cell uni-list-cell-pd"
                v-for="item3 in item.option"
                :key="item3.content"
              >
                <view>
                  <checkbox :value="item3.content" style="padding:8rpx 0;" />
                  <text>{{item3.content}}</text>
                </view>
              </label>
            </checkbox-group>
          </view>
        </view>
        <view class="tips_wrap">
          <view class="item_tips">解析</view>
          <view class="tips">{{ item.tip }}</view>
          <view class="your_answer">
            你的答案是:
            <text>{{ list.records[index] }}</text>
          </view>
          <view class="correct_answer">
            正确答案是:
            <text>{{ answer[index].code }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="res_wrap">
      <view class="res_count">您的答对了{{list.count}}道题</view>
      <view class="res_score">您的得分是:{{list.score}}分(满分为{{ total }}分)</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      total: 0,
      answer: [],
      current: 0,
      list: {}
    };
  },
  methods: {
    handleEnd() {
      console.log("end");
    }
  },
  onLoad(option) {
    console.log("lanch");
    this.id = option.id;
    //this.id = 33;
    this.request({
      url: this.apiServer  + "/record/findRecordById?id=" + this.id
    }).then(res => {
      var count = 0;
      res.data.questions = res.data.questions.split(",");
      res.data.answers = res.data.answers.split(",");
      for (var i = 0; i < res.data.answers.length; i++) {
        if (res.data.answers[i] == 1) {
          count++;
        }
      }
      res.data.count = count;
      res.data.records = res.data.records.split(",");
      this.list = res.data;

      //正确答案
      var t_total = 0;
      var group = this.list.group;
      console.log(group);

      for (var i = 0; i < group.subjectList.length; i++) {
        for (var j = 0; j < group.subjectList[i].optionsList.length; j++) {
          if (group.subjectList[i].optionsList[j].status == 1) {
            this.answer.push(group.subjectList[i].optionsList[j]);
            //总分
            t_total += group.subjectList[i].grade;
          }
        }
      }
      this.total = t_total;
      console.log(this.answer);

      console.log(this.list);
    });
    //我的答案:String=>Array
    // this.myAnswer = this.myAnswer.split(",");
    // console.log(this.myAnswer);
  }
};
</script>

<style lang="scss" scoped>
.question_wrap {
  padding: 15rpx;
  .group_wrap {
    .group_name {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40rpx;
      font-weight: 800rpx;
      padding-bottom: 10rpx;
      color: #000;
    }

    .sub_wrap_red {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 10rpx;
      padding-top: 10rpx;
      color: red;
      .subject_type {
        font-size: 32rpx;
        font-weight: 700;
        padding-right: 10rpx;
      }
      .subject_title {
        font-size: 30rpx;
      }
      .subject_grade {
        font-size: 28rpx;
        padding-left: 10rpx;
      }
      .icon_item {
        padding: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .sub_wrap {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 10rpx;
      padding-top: 10rpx;
      .subject_type {
        color: #000;
        font-size: 32rpx;
        font-weight: 700;
        padding-right: 10rpx;
      }
      .subject_title {
        color: #000;
        font-size: 30rpx;
      }
      .subject_grade {
        color: #ccc;
        font-size: 28rpx;
        padding-left: 10rpx;
      }
    }
  }
  .btn_wrap {
    padding: 20rpx 15rpx;
    justify-content: center;
    align-items: center;
  }

  .tips_wrap {
    .item_tips {
      border-left: solid pink 10rpx;
      padding-left: 30rpx;
      padding-top: 5rpx;
      padding-bottom: 5rpx;
      font-size: 30rpx;
      font-weight: 600;
    }
    .tips {
      color: #ccc;
      size: 28rpx;
      padding: 5rpx 0;
    }
    .your_answer {
      padding: 10rpx 0;
    }
    .correct_answer {
      padding: 10rpx 0;
    }
    border-bottom: solid #ccc 3rpx;
    padding-bottom: 5rpx;
  }
}

.uni-list-cell {
  justify-content: flex-start;
}
</style>